<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>多列布局</title>
  </head>
  <style type="text/css">
    /* 一列定宽，一列自适应 */
    /* 
     第一种：float:left;margin-left:50px;
     ips：此方案对于定宽布局比较好,不定宽推荐overflow:hidden;
   */
    /* .parent {
      height: 100px;
      width: 100%;
      background-color: yellow;
    }

    .left {
      width: 100px;
      height: 50%;
      background-color: #384;
      float: left;
      margin-right: 50px;
    }

    .right {
      height: 100%;
      background-color: blue;
      overflow: hidden;
    } */




    /* 
    第二种：flex盒子
     */
    /* .parent {
      height: 100px;
      width: 100%;
      background-color: yellow;
      display: flex;
    }

    .left {
      width: 100px;
      height: 50%;
      background-color: #384;
      margin-right: 50px;
    }

    .right {
      height: 100%;
      background-color: blue;
      flex: 1;
    } */

    /* 
    第四种：table
     */

    .parent {
      height: 100px;
      width: 100%;
      background-color: yellow;
      display: table;
      table-layout: fixed;
    }

    .left {
      width: 100px;
      height: 50%;
      background-color: #384;
      margin-right: 50px;
      display: table-cell;
    }

    .right {
      height: 100%;
      background-color: blue;
      display: table-cell;
    }
  </style>

  <body>
    <div class="parent">
      <div class="left">left</div>
      <div class="right">right</div>
    </div>

  </body>

</html>